<template>
    <div class="category-detail-page">
        <el-card shadow="never">
            <el-form
                :model="form"
                label-position="right"
                label-suffix=":"
                label-width="160px"
                ref="form"
                :rules="rules">
                <el-form-item label="兑换码名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入勋章课程兑换码数量" class="input-width"></el-input>
                </el-form-item>
                <el-form-item label="勋章课程兑换码数量" prop="num">
                    <el-input
                        type="number"
                        v-model="form.num"
                        placeholder="请输入勋章课程兑换码数量"
                        class="input-width"></el-input>
                </el-form-item>
                <el-form-item label="兑换码类型" prop="type_id">
                    <el-select filterable placeholder="请选择" v-model="form.type_id" class="w-full">
                        <el-option
                            v-for="item in typeList"
                            :key="item.id"
                            :label="`${item.name} ${item.price}元`"
                            :value="item.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="企业" prop="merit_course_id">
                    <el-select filterable placeholder="请选择" v-model="form.company_id" class="w-full">
                        <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id"/>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="text-center">
                <el-button type="primary" @click="onSave">保 存</el-button>
                <el-button @click="onBack">返 回</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    components: {
    },
    data() {
        return {
            id: '',
            form: {
                num: '',
                company_id: '',
                type_id: '',
            },
            rules: {
                num: [
                    { required: true, message: '请输入勋章课程兑换码数量', trigger: 'blur' },
                ],
                name: [
                    { required: true, message: '请输入兑换码名称', trigger: 'blur' },
                ],
                type_id: [
                    { required: true, message: '请选择兑换码类型', trigger: 'change' },
                ],
            },

            companyList: [],
            typeList: [],
        };
    },
    methods: {
        onSave() {
            this.$refs.form.validate((valid) => {
                if (!valid) return;
                this.form.num = +this.form.num;

                API.post('merit_exchange_code_group', this.form).then(() => {
                    $ele.$message.success('新增成功');
                    this.onBack();
                });
            });
        },

        fetchCompany() {
            this.loading = true;
            API.get('company/list').then((res) => {
                this.companyList = res;
            }).finally(() => this.loading = false);
        },

        fetchType() {
            this.loading = true;
            API.get('merit_exchange_code_type').then((res) => {
                this.typeList = res;
            }).finally(() => this.loading = false);
        },

        onBack() {
            this.$router.back();
        },
    },
    mounted() {
        this.id = this.$route.params.id;
        this.fetchCompany();
        this.fetchType();
    },
};
</script>

<style lang="scss" scoped>
</style>
